<template>
  <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props">
      <img
        class="doge"
        src="https://img.yzcdn.cn/vant/doge.png"
        :style="{ transform: `scale(${props.distance / 80})` }"
      />
    </template>

    <!-- 释放提示 -->
    <template #loosing>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
    </template>

    <!-- 加载提示 -->
    <template #loading>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
    </template>
    <div class="matt" v-if="Discuss">
      <div class="list">最新评论({{ Discuss.length }})</div>
      <div class="bigBox" v-for="(artist, index) in Discuss" :key="index">
        <img :src="artist.user.avatarUrl" class="first" />
        <div class="middle">
          <div class="name">{{ artist.user.nickname }}</div>
          <div class="time">{{ artist.time | formatPlayCount }}分钟前</div>
          <p class="Discuss">{{ artist.content }}</p>
        </div>
        <span class="icon"><img src="" /></span>
      </div>
    </div>
    <div class="toomuch" @click="getMore">加载更多...</div>
  </van-pull-refresh>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      Discuss: "",
      limit: 20,
      count: 0,
      isLoading: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData: function () {
      this.$root.isShowLoading = true;
      this.axios
        .get(
          "/comment/playlist?id=" +
            this.$route.query.id +
            "&limit=" +
            this.limit
        )
        .then((response) => {
          console.log(response.data.comments);
          this.Discuss = response.data.comments;
        })
        .finally(() => {
          this.$root.isShowLoading = false;
        });
    },
    getMore() {
      this.limit += 20;
      this.getData();
    },
    onRefresh() {
      setTimeout(() => {
        this.limit++;
        this.getData();
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
  watch: {
    $route: function () {
      this.getData();
    },
  },
  filters: {
    formatPlayCount: function (timestamp) {
      var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      //  var Y = date.getFullYear() + '-';
      //  var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      //  var D = date.getDate() + ' ';
      //  var h = date.getHours() + ':';
      var m = date.getMinutes();
      //  var s = date.getSeconds();
      return m;
    },
  },
};
</script>

<style scoped lang="less">
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
.matt {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  .list {
    width: 100%;
    height: 23px;
    color: #666666;
    background: #ebecec;
    font-size: 12px;
    line-height: 23px;
    padding-left: 20px;
  }
  .bigBox {
    width: 100%;
    height: 110px;
    .first {
      width: 30px;
      height: 30px;
      margin: 10px 0 0 10px;
      border-radius: 50%;
    }
    .middle {
      position: absolute;
      width: 325px;
      height: 100px;
      top: 10px;
      left: 50px;
      color: #666666;
      .name {
      }
      .time {
        font-size: 12px;
        color: #999999;
      }
      .Discuss {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
.toomuch {
  width: 100vw;
  height: 30px;
  font-size: 16px;
  color: #8bb8dd;
  text-align: center;
  line-height: 30px;
}
</style>